<template>
    <div class="aside">
        <h4><a href="/">Cesium Demo</a></h4>
        <!-- 模型 -->
        <ul>
            <h5>模型</h5>
            <li v-for="model of models" :key="model.id">
                <router-link :to="`/Model${model.to}`">{{ model.title }}</router-link>
            </li>
        </ul>
        <!-- 切割线 -->
        <ul>
            <h5>切割</h5>
            <li v-for="split of splits" :key="split.id">
                <router-link :to="`/Split${split.to}`">{{ split.title }}</router-link>
            </li>
        </ul>
        <!-- 运动 -->
        <ul>
            <h5>CZML</h5>
            <li v-for="czml of czmls" :key="czml.id">
                <router-link :to="`/CZML${czml.to}`">{{ czml.title }}</router-link>
            </li>
        </ul>
    </div>
</template>
<script setup name="Aside">
import { nanoid } from 'nanoid';

const models = [
    {
        id: nanoid(),
        to: "/AddModel",
        title: "添加模型"
    },
]
const splits = [
    {
        id: nanoid(),
        to: "/LayerSplit",
        title: "切割线"
    }
]
const czmls = [
    {
        id: nanoid(),
        to: "/ActiveCZML",
        title: "路线运动"
    },
    {
        id: nanoid(),
        to: "/ActiveCZMLPoi",
        title: "点运动"
    },
    {
        id: nanoid(),
        to: "/ActiveCZMLModel",
        title: "模型运动"
    }
]
</script>
<style scoped>
.aside {
    position: absolute;
    left: 5px;
    top: 5px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .8);
    width: 15%;
    height: 95%;
    background-color: rgba(125, 125, 125, .5);
    z-index: 2;
}

.aside ul {
    padding-left: 0;
    user-select: none;
}

.aside h4 {
    text-align: center;
    padding: 2px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .8);
}

.aside h5 {
    color: rgba(255, 255, 255, .8);
}

.aside li {
    padding-left: 20px;
    display: block;
    list-style: none;
}

.aside li:hover {
    background-color: rgba(125, 125, 125, .8);
}

.aside a {
    text-decoration: none;
    color: rgba(255, 255, 255);
}
</style>